/*
    webpack.config.js  webpack配置文件
        作用：只是webpack干那些活 运行webpack指令的时候 会加载里面的配置

    记住：所有的构建工具都是基于nodejs平台运行的，因此，在这个配置文件中采用的模块化遵循给commonjs语法的（使用module.export） 而src中是项目的代码，需要遵循es6的模块化编程
*/

// resolve 用来拼接绝对路径的方法
const {resolve} = require("path")
module.exports = {
    // webpack配置 一共有五个核心配置
    // 入口文件
    entry: "./index.js",
    output: {
        // 输出文件名字
        filename: "build.js",
        // 输出路径，一般采用绝对路径 防止出错 __dirname代表当前目录的绝对路径
        path: resolve(__dirname, "build")
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用什么loader处理
                use: [
                    // 创建style标签 将js中的样式资源插入 添加到页面中（header）生效
                    "style-loader",
                    // 将css文件转换成commonjs模块 加载到js文件中 里面的内容是样式字符串
                    "css-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    // 插件plugins的配置
    plugins: [
        // 详细的插件配置
    ],
    // 模式
    mode: "development"
}